<template>
  <div class="container">
    <h2>航班变更申请查询</h2>
    <form @submit.prevent="searchFlights">
      <div>
        <label for="flightNumber">航班号:</label>
        <input type="text" id="flightNumber" v-model="flightNumber" placeholder="请输入航班号">
      </div>
      <div>
        <label for="applyDate">申请日期:</label>
        <input type="date" id="applyDate" v-model="applyDate">
      </div>
      <p></p>
      <button type="submit" class="query">查询</button>
      <p></p>
    </form>
    <table>
      <tr>
        <th>航班号</th>
        <th>变更原因</th>
        <th>变更日期</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="flight in flights" :key="flight.id">
        <td>{{ flight.flightNumber }}</td>
        <td>{{ flight.reason }}</td>
        <td>{{ flight.changeDate}}</td> <!-- 假设使用过滤器来格式化日期 -->
        <td>{{ flight.status }}</td>
        <td>
          <button @click="confirmApproval(flight)">审核</button>
        </td>
      </tr>
    </table>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <p>是否同意申请?</p>
        <button @click="agreeApplication">同意</button>
        &nbsp;
        <button @click="disagreeApplication">不同意</button>
      </div>
    </div>
    <div class="pagination">
      <button @click="previousPage">上一页</button>
      <span v-for="page in totalPages" :key="page" @click="goToPage(page)">
        <button :class="{ active: page === currentPage }">{{ page }}</button>
      </span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flightNumber: '',
      applyDate: '',
      flights: [
        { id: 1, flightNumber: 'CA1234', reason: '天气原因', changeDate:'xxxx年xx月xx日',status: '待审核' }
        // 更多航班信息可以在这里添加
      ],
      currentPage: 1,
      pageSize: 10,
      totalPages: 1,
      showModal: false,
      currentFlight: null, // 当前选中的航班
    };
  },
  methods: {
    searchFlights() {
      // 这里可以添加搜索航班的逻辑
    },
    viewDetails(flight) {
      // 这里可以添加查看航班详情的逻辑
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      this.currentPage = page;
    },
    calculateTotalPages() {
      this.totalPages = Math.ceil(this.flights.length / this.pageSize);
    },
    confirmApproval(flight) {
      this.currentFlight = flight; // 保存当前航班信息
      this.showModal = true; // 显示模态框
    },
    closeModal() {
      this.showModal = false; // 关闭模态框
    },
    agreeApplication() {
      // 处理同意申请的逻辑
      this.updateFlightStatus(this.currentFlight.id, '同意变更');
      console.log(`同意了航班号${this.currentFlight.flightNumber}的申请`);
      this.closeModal();
    },
    disagreeApplication() {
      // 处理不同意申请的逻辑
      this.updateFlightStatus(this.currentFlight.id, '拒绝变更');
      console.log(`拒绝了航班号${this.currentFlight.flightNumber}的申请`);
      this.closeModal();
    },
    updateFlightStatus(flightId, status) {
      // 找到对应的航班并更新状态
      const flightIndex = this.flights.findIndex(flight => flight.id === flightId);
      if (flightIndex !== -1) {
        this.flights[flightIndex].status = status;
      }
    },

  },
  watch: {
    flights() {
      this.calculateTotalPages();
    }
  },
  created() {
    this.calculateTotalPages();
  },
  filters: {
    formatDate(value) {
      // 假设 value 是一个 Date 对象或者一个可以被 new Date() 解析的日期字符串
      const date = new Date(value);
      return date.toLocaleDateString(); // 格式化日期为本地日期格式
    }
  }
};
</script>

<style scoped>
/* 在这里添加CSS样式 */
.container {
  width: 80%;
  margin: 0 auto;
  padding: 60px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
.pagination button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  cursor: pointer;
}
.pagination button.active {
  background-color: #4680b2;
  color: white;
  border-color: #3685c7;
}
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}













/* 基础样式 */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
}

.container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  padding: 60px;
  max-width: 1000px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* 表单样式 */
form {
  margin-bottom: 30px;
  padding: 20px;
  background: #eee;
  border-radius: 8px;
}

input, select {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  border: 1px solid #ddd;
}

button.query {
  /* 按钮样式，使用之前定义的CSS变量 */
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  text-align: left;
  padding: 10px;
  border: 1px solid #ddd;
}

th {
  background-color: #3685c7;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

/* 模态框样式 */
.modal {
  /* 模态框样式，使用之前定义的CSS变量 */
}

.modal-content {
  /* 模态框内容样式，使用之前定义的CSS变量 */
}

/* 分页组件样式 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  /* 分页按钮样式，使用之前定义的CSS变量 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    width: 90%;
    padding: 30px;
  }

  form {
    padding: 10px;
  }

  th, td {
    padding: 8px;
  }
}
</style>